<template>
  <div class="feedback-details">
    <div class="top-item"  v-if="!loading">
      <div class="top-item-wrap">
        <div class="title">
          {{ jobInfo.jobName }}
          <span
            >{{
              jobInfo.lowestSalary + "-" + jobInfo.highestSalary
            }}元/天</span
          >
        </div>
        <div class="row">
          <span class="local-icon" />
          <span class="city">{{ jobInfo.city }}</span>
          <span class="small-text">{{ jobInfo.workPeriod }}</span
          ><span class="line" /><span class="small-text"
            >{{ jobInfo.practicePeriod }}个月</span
          >
        </div>
        <div class="row2">
          {{ jobInfo.companyName }} <span class="line"></span>
          {{ jobInfo.industry }}
        </div>
        <div class="date">
          <span class="last-operation">最近操作：{{ jobInfo.publishTime }}</span>
          <span class="open" @click="linkToJobDetail(jobInfo.id)">查看职位详情</span>
        </div>
        <div class="feedback-confirm-tips">
          <img src="../../assets/images/user/isFeedback.png" v-if="currentJobStatus > 0" alt="停止招聘" />
          <img src="../../assets/images/user/confirmInvited.png" v-else-if="interInfo.status >= 5" alt="已确认邀约" />
          <img src="../../assets/images/user/refuseInvited.png" v-else-if="interInfo.status == 4" alt="已拒绝邀约" />
        </div>
      </div>
      <div class="background-color-box"></div>
    </div>
    <div class="feedback-result-box">
      <div class="feedback-result">
        <p class="result-title">面试时间</p>
        <p class="result-text">
          {{ interInfo.inviteDate }}
        </p>
      </div>
      <div class="feedback-result">
        <p class="result-title">面试方式</p>
        <p class="result-text">
          <van-checkbox-group v-model="detailform.inviteWay">
            <van-checkbox v-for="item in inviteWay"
              :key="item.value" :name="item.value" disabled shape="square">{{ item.label }}</van-checkbox>
          </van-checkbox-group>
        </p>
      </div>
      <div class="feedback-result">
        <p class="result-title">面试地点</p>
        <p class="result-text">
          <span class="local-icon" />
          <span>{{ interInfo.inviteAddress }}</span>
        </p>
      </div>
      <div class="feedback-result">
        <p class="result-title">其他</p>
        <p class="result-text" v-if="interInfo.inviteContent" v-html="interInfo.inviteContent.replace(/\n/gm, '<br>')"></p>
      </div>
      <div class="feedback-result">
        <p class="result-title">注意事项</p>
        <p class="result-text">
          <van-checkbox-group v-model="detailform.noticeItem">
            <van-checkbox v-for="item in attentionEvent"
              :key="item.value" :name="item.value" disabled shape="square">{{ item.label }}</van-checkbox>
          </van-checkbox-group>
        </p>
      </div>
      <div class="feedback-result">
        <p class="result-title">原因</p>
        <p class="result-text" v-if="interInfo.feedback" v-html="interInfo.feedback.replace(/\n/gm, '<br>')"></p>
      </div>
      <div class="btn-group">
        <div class="btn-top">
          <div
            class="btn reject"
            v-if="interInfo.status < 4 && currentJobStatus === 0"
            @click="changeActived(2)"
          >
            拒绝邀约
          </div>
          <div
            class="btn confirm"
            v-if="interInfo.status < 4 && currentJobStatus === 0"
            @click="submit(5)"
          >
            确认邀约
          </div>
        </div>
        <div
          v-if="
            [5, 7].indexOf(Number(interInfo.status)) > -1 &&
            currentJobStatus === 0
          "
          class="click-replay"
          @click="linkTo('feedback')"
        >
          点击反馈应聘结果
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import {
  inviteWay,
  attentionEvent,
  inviteResultType,
} from "@/utils/frontDataDict.js";
import {
  getInviteInfo,
  getJobInfo,
  isJob,
  updateInvite
} from "../../request/api";
import { getWorkPeriodName } from "../../utils/frontDataDict";
import { formatTime, timestampToTime } from "../../utils/utils";
import { Toast } from 'vant';
Vue.use(Toast);
export default {
  data() {
    return {
      inviteResultType: inviteResultType,
      attentionEvent: attentionEvent,
      detailform: {
        inviteWay: ["0"],
        noticeItem: [],
        inviteResult: ["1"],
        reasonText: "",
      },
      loading: true,
      inviteWay: inviteWay,
      jobInfo: {},
      interInfo: {},
      currentJobStatus: 0 // 0 发布 1 暂停发布 2 删除
    }
  },
  created() {
    this.getInvitedDetails();
  },
  methods: {
    submit(status) {
      return new Promise((resolve, reject) => {
        let params = {
          status: "" + status,
          sendRecordId: this.interInfo.sendRecordId,
          id: this.interInfo.id,
          companyId: this.jobInfo.companyId,
          jobId: this.jobInfo.id,
          studentId: this.interInfo.studentId,
          userId: this.interInfo.studentId,
        };
        updateInvite(params).then((res) => {
          if (res.data) {
            this.$router.replace({ name: "confirmInvited" })
            resolve();
          } else {
            Toast(res.msg);
            reject();
          }
        });
      });
    },
    changeActived() {
      let { id, jobId } = this.$route.query;
      this.$router.push({ name: "refuseInvited", query: { id, jobId } });
    },
    linkToJobDetail(id) {
      this.$router.push({
        path: `/jobDetail/${id}`,
      });
    },
    linkTo(routeName, id) {
      if (id) {
        localStorage.setItem("currentJobId", id);
        this.$router.push({ name: routeName, params: { id: id } });
      } else {
        this.$router.push({ name: routeName });
      }
    },
    getInvitedDetails() {
      let { id, jobId } = this.$route.query;
      isJob({ id: jobId }).then((res) => {
        if (res.code === 0) {
          /**
           * 职位状态 0 发布 1 暂停发布 2 删除
           */
          this.currentJobStatus = Number(res.data);
          getInviteInfo({ id }).then((inviteRes) => {
            if (inviteRes.data) {
              inviteRes.data.inviteDate &&
                (inviteRes.data.inviteDate = timestampToTime(
                  new Date(inviteRes.data.inviteDate)
                ));
              try {
                if (Array.isArray(JSON.parse(inviteRes.data.inviteWay))) {
                  this.detailform.inviteWay = JSON.parse(inviteRes.data.inviteWay);
                }
                if (Array.isArray(JSON.parse(inviteRes.data.noticeItem))) {
                  this.detailform.noticeItem = JSON.parse(
                    inviteRes.data.noticeItem
                  );
                }
              } catch {
                () => {};
              }
              this.interInfo = inviteRes.data;
              getJobInfo({ id: inviteRes.data.jobId })
                .then((vv) => {
                  this.loading = false;
                  if (vv.data) {
                    try {
                      if (Array.isArray(JSON.parse(vv.data.industry))) {
                        vv.data.industry = JSON.parse(vv.data.industry)[1];
                      }
                      if (Array.isArray(JSON.parse(vv.data.city))) {
                        vv.data.city = JSON.parse(vv.data.city)[1];
                      }
                    } catch {
                      () => {};
                    }
                    try {
                      vv.data.workPeriod &&
                        (vv.data.workPeriod = getWorkPeriodName(
                          vv.data.workPeriod
                        ));
                    } catch (error) {
                      console.error(new Error("workPeriod不存在"));
                    }
                    vv.data.publishTime &&
                      (vv.data.publishTime = formatTime(
                        new Date(vv.data.publishTime)
                      ));
                    this.jobInfo = vv.data;
                  }
                })
                .catch((err) => {
                  this.loading = false;
                });
            } else {
              this.loading = false;
            }
          }).catch((err) => {
            this.loading = false;
          });
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
@media (max-width: 768px) {
  .feedback-result-box {
    padding-top: 0.15rem;
  }

  .top-item-wrap {
    padding: 0.2rem 0.1rem 0.15rem;
    font-size: 0.13rem;
    color: #9597a0;
    position: relative;
    background-color: #ffffff;
    .title {
      display: flex;
      height: 0.28rem;
      align-items: center;
      font-size: 0.2rem;
      font-weight: 500;
      color: #37383d;
      .title-name {
        flex: 1;
      }
      .salary {
        font-size: 0.13rem;
        color: #9597a0;
      }
    }
    .row {
      display: flex;
      height: 0.18rem;
      align-items: center;
      margin: 0.1rem 0;
      .local-icon {
        width: 0.13rem;
        height: 0.16rem;
        background: url("../../assets/images/position.png") no-repeat center
          center / cover;
      }
      .city {
        font-size: 0.13rem;
        color: #37383d;
        margin: 0 0.16rem 0 0.07rem;
      }
    }
    .row2 {
      height: 0.18rem;
      line-height: 0.18rem;
      margin-bottom: 0.12rem;
    }
    .date {
      display: flex;
      height: 0.18rem;
      line-height: 0.18rem;
      .last-operation {
        flex: 1;
        font-size: 0.12rem;
        color: #c4c4c4;
      }
      .open {
        color: #2f8efe;
      }
      
    }
    .feedback-confirm-tips {
      width: 1.06rem;
      height: 0.68rem;
      position: absolute;
      right: 0.21rem;
      bottom: 0.23rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .background-color-box {
    width: 100%;
    height: 0.1rem;
    background-color: #fafafa;
  }
  .line {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #9597a0;
    margin: 0 10px;
  }
  .feedback-result {
    padding: 0 0.1rem 0.16rem;
    display: flex;
    .result-title {
      width: 0.87rem;
      height: 0.21rem;
      font-size: 0.15rem;
      font-weight: 500;
      color: #37383D;
      line-height: 0.21rem;
    }
    .result-text {
      font-size: 0.15rem;
      color: #37383D;
      line-height: 0.21rem;
      flex: 1;
    }
  }
  .btn-group {
    .btn-top {
      display: flex;
      padding: 0.4rem 0.12rem 0;
      .btn {
        flex: 1;
        text-align: center;
        line-height: 0.55rem;
        height: 55px;
        border-radius: 5px;
        font-size: 18px;
        font-weight: 500;
        color: #3D6CB0;
        border-radius: 5px;
      }
      .reject {
        border: 1px solid #3D6CB0;
        margin-right: 0.11rem;
      }
      .confirm {
        color: #FFFFFF;
        background: #3D6CB0;
      }
    }
    .click-replay {
      margin: 0 0.15rem;
      height: 0.55rem;
      background: #3D6CB0;
      border-radius: 0.05rem;
      font-size: 0.18rem;
      font-weight: 500;
      color: #FFFFFF;
      text-align: center;
      line-height: 0.55rem;
    }
  }
  /deep/ .van-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    .van-checkbox {
      margin-right: 0.16rem;
      margin-bottom: 0.12rem;
      font-size: 0.15rem;
      line-height: 0.21rem;
      .van-checkbox__label--disabled {
        color: #B1B1B1;
      }
    }
  }
  /deep/ .van-field {
    border-radius: 0.02rem;
    border: 1px solid #F0F0F0;
    font-size: 0.14rem;
    color: #37383D;
    line-height: 0.2rem;
  }
}
</style>